<template>
    <nut-tabbar v-model="active" bottom safe-area-inset-bottom placeholder @tab-switch="click_to">
        <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon" :name="item.name"  >
        </nut-tabbar-item>
    </nut-tabbar>
</template>
<script setup>
import { h, ref } from 'vue'
import { Home, Category, Find, Cart, My } from '@nutui/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter()

const List = [
  {
    title: '首页',
    icon: h(Home),
    name: '/home/index/'
  },
  {
    title: '购物',
    icon: h(Category),
    name: '/shop/index/'
  },
  {
    title: '发布',
    icon: h(Find),
    name: '/publish/index/'
  },
  {
    title: '消息',
    icon: Cart,
    name: '/chat/index/'
  },
  {
    title: '我',
    icon: h(My),
    name: '/user/index/'
  }
]
const active = ref(0)

const click_to = (item) => {
     router.push(String(item.name)) 
}

</script>